/**
 * 得到用户信息
 * 一打开页面就发送ajax,存入storage，然后渲染进行渲染
 */
function getUserInfo() {
  Ajax({
    type: "GET",
    url: "http://localhost/project/server/userManage.php",
    success(msg) {
      // 当前页是第一页
      sessionStorage.setItem("currentPage", 1);
      // 将数据存储一份到storage里面
      sessionStorage.setItem("userInfo", msg);
      // 先将数据变为对象数组数据
      msg = JSON.parse(msg).slice(0, 10);
      render(msg);
    },
  });
}
getUserInfo();

/**
 * 实现分页操作
 */
// 渲染的方法
function render(msg) {
  // 渲染数据,将数据丢入tbody
  const tbody = document.querySelector("tbody");
  //先清空内容
  tbody.innerHTML = "";
  // 再渲染
  msg.forEach((item) => {
    let str = `
         <tr>
           <td>${item.uid}</td>
           <td>${item.username}</td>
           <td>${item.password}</td>
           <td>${item.phone}</td>
           <td>${item.age}</td>
           <td>${item.vip}</td>
           <td>${item.userexp}</td>
           <td>
     <button data-bs-toggle="modal" data-bs-target="#myModal2" class="btn btn-warning btn-sm" id='${item.uid}' data-upd='upd'>修改</button>
     <button class="btn btn-danger btn-sm" id='${item.uid}' data-del='del'>删除</button>
           </td>
         </tr>
   `;
    tbody.innerHTML += str;
  });
}

// 首页 index
function index() {
  // 首先将分页的页数改为第一页
  sessionStorage.setItem("currentPage", 1);
  // 拿到数据，渲染
  let msg = sessionStorage.getItem("userInfo");
  msg = JSON.parse(msg).slice(0, 10);
  render(msg);
}

// 上一页
function up() {
  // 获取当前页
  let currentPage = +sessionStorage.getItem("currentPage");
  currentPage = currentPage - 1;
  // 当前页不能小于1
  if (currentPage < 1) {
    currentPage = 1;
  }
  sessionStorage.setItem("currentPage", currentPage);
  // 计算出当前页的数据
  let userInfo = sessionStorage.getItem("userInfo");
  userInfo = JSON.parse(userInfo).slice(
    (currentPage - 1) * 10,
    currentPage * 10
  );
  // 渲染数据
  render(userInfo);
}

// 下一页
function down() {
  //获取当前页
  let currentPage = +sessionStorage.getItem("currentPage");
  //计算出当前页的数据
  let userInfo = sessionStorage.getItem("userInfo");
  userInfo = JSON.parse(userInfo);
  //当前页不能大于尾页
  currentPage = currentPage + 1;
  if (currentPage > Math.ceil(userInfo.length / 10))
    currentPage = Math.ceil(userInfo.length / 10);

  sessionStorage.setItem("currentPage", currentPage);
  userInfo = userInfo.slice((currentPage - 1) * 10, currentPage * 10);
  //渲染数据
  render(userInfo);
}

// 尾页 last
function last() {
  // 获取所有的用户数据
  let userInfo = sessionStorage.getItem("userInfo");
  // 转换为对象
  userInfo = JSON.parse(userInfo);
  // 计算当前页,计算出最后一页的数据
  sessionStorage.setItem("currentPage", Math.ceil(userInfo.length / 10));
  // 计算末尾页的数据
  userInfo = userInfo.slice(
    Math.floor(userInfo.length / 10) * 10,
    userInfo.length
  );
  render(userInfo);
}

/**
 * 删除操作
 * 用事件的委派来做
 */

const tbody = document.querySelector("tbody");
// console.log(tbody);
tbody.onclick = function (e) {
  // console.log(e.target.id);
  if (e.target.dataset.del == "del") {
    const res = confirm("是否确定删除?");
    if (res) {
      Ajax({
        url: "http://localhost/project/server/userDelete.php",
        data: { id: e.target.id },
        success() {
          location.reload();
        },
      });
    }
  }
  // 修改
  if (e.target.dataset.upd == "upd") {
    Ajax({
      url: "http://localhost/project/server/userQueryOne.php",
      data: { id: e.target.id },
      success(msg) {
        msg = JSON.parse(msg);
        // console.log(msg);
        //渲染数据到修改模态框上
        document.querySelector("#uname").value = msg.username;
        document.querySelector("#paw").value = msg.password;
        document.querySelector("#p").value = msg.phone;
        document.querySelector("#a").value = msg.age;
        document.querySelector("#v").value = msg.vip;

        const commentAll = document.querySelectorAll(".cot");
        console.log(commentAll);
        if (msg.userexp == "好评") {
          commentAll[0].checked = true;
        } else {
          commentAll[1].checked = true;
        }
        // 渲染的用户编号
        document.querySelector("#updatesid").value = msg.uid;
      },
    });
  }
};

/**
 * 添加数据
 */
function addUser() {
  // 首先收集表单数据
  const userName = document.querySelector("#userName").value;
  const password = document.querySelector("#password").value;
  const phone = document.querySelector("#phone").value;
  const age = document.querySelector("#age").value;
  const vip = document.querySelector("#vip").value;
  const com = document.querySelectorAll(".com");
  let userexp;
  if (com[0].checked == true) {
    userexp = "好评";
  } else {
    userexp = "差评";
  }

  // 校验;
  if (userName && password && phone && age && vip) {
    Ajax({
      type: "GET",
      url: "http://localhost/project/server/userAdd.php",
      data: { userName, password, phone, age, vip, userexp },
      success() {
        location.reload();
      },
    });
  } else {
    alert("不能为空！");
  }
}

/**
 * 修改操作
 *
 * 点击模态框的确定按钮时，先获取后台数据发送ajax
 */
function updateUser() {
  const id = document.querySelector("#updatesid").value;
  const userName = document.querySelector("#uname").value;
  const password = document.querySelector("#paw").value;
  const phone = document.querySelector("#p").value;
  const age = document.querySelector("#a").value;
  const vip = document.querySelector("#v").value;

  const userexpAll = document.querySelectorAll(".comment");
  let userexp;
  if (userexpAll[0].checked == true) {
    userexp = "好评";
  } else {
    userexp = "差评";
  }

  Ajax({
    type: "GET",
    url: "http://localhost/project/server/userUpdate.php",
    data: { id, userName, password, phone, age, vip, userexp },
    success() {
      location.reload();
    },
  });
}

// 下拉框实现好评、差评

function comment() {
  const okoption = document.getElementById("ok");
  const nooption = document.getElementById("no");

  if (okoption.selected == true) {
    // 发送ok的Ajax
    Ajax({
      url: "http://localhost/project/server/lookGood.php",
      success(msg) {
        // 存储好评的数据信息
        sessionStorage.setItem("userInfo", msg);
        // 将数据转化为对象数组
        msg = JSON.parse(msg).slice(0, 10);
        render(msg);
      },
    });
  } else {
    // 发送no的Ajax
    Ajax({
      url: "http://localhost/project/server/lookBad.php",
      success(msg) {
        // 存储差评的数据信息
        sessionStorage.setItem("userInfo", msg);
        // 将数据转化为对象数组
        msg = JSON.parse(msg).slice(0, 10);
        render(msg);
      },
    });
  }
}

// // 查看好评
// function good() {
//   Ajax({
//     url: "http://localhost/project/server/lookGood.php",
//     success(msg) {
//       // 存储好评的数据信息
//       sessionStorage.setItem("userInfo", msg);
//       // 将数据转化为对象数组
//       msg = JSON.parse(msg).slice(0, 10);
//       render(msg);
//     },
//   });
// }

// 查看差评
// function bad() {
//   Ajax({
//     url: "http://localhost/project/server/lookBad.php",
//     success(msg) {
//       // 存储差评的数据信息
//       sessionStorage.setItem("userInfo", msg);
//       // 将数据转化为对象数组
//       msg = JSON.parse(msg).slice(0, 10);
//       render(msg);
//     },
//   });
// }

// 根据用户名来查询信息
function userNameQuery() {
  const userinp = document.getElementById("userinp");
  // 获取输入框的值,就是获取用户名
  const username = userinp.value;
  console.log(username);
  if (username.trim().length == 0) return alert("请输入用户姓名!");
  Ajax({
    url: "http://localhost/project/server/userNameQuery.php",
    data: { username },
    success(msg) {
      if (msg == "[]") {
        alert("无此用户信息!");
        location.reload();
      } else {
        // 存储用户名的数据信息
        sessionStorage.setItem("userInfo", msg);
        // 将数据转化为对象数组
        msg = JSON.parse(msg).slice(0, 10);
        render(msg);
      }
    },
  });
}

// 根据升序来查询信息
function sx() {
  Ajax({
    url: "http://localhost/project/server/sxQuery.php",
    success(msg) {
      // 存储用户名的数据信息
      sessionStorage.setItem("userInfo", msg);
      // 将数据转化为对象数组
      msg = JSON.parse(msg).slice(0, 10);
      render(msg);
    },
  });
}

// 根据降序来查询信息
function jx() {
  Ajax({
    url: "http://localhost/project/server/jxQuery.php",
    success(msg) {
      // 存储用户名的数据信息
      sessionStorage.setItem("userInfo", msg);
      // 将数据转化为对象数组
      msg = JSON.parse(msg).slice(0, 10);
      render(msg);
    },
  });
}

//点击会员
function vip() {
  Ajax({
    url: "http://localhost/project/server/vipQuery.php",
    success(msg) {
      // 存储差评的数据信息
      sessionStorage.setItem("userInfo", msg);
      // 将数据转化为对象数组
      msg = JSON.parse(msg).slice(0, 10);
      render(msg);
    },
  });
}
